<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/highcharts-3d.js"></script>
    <script src="../js/vue.js"></script>
    <style>
        #container{
            width: 500px;
            height: 500px;
            margin: 0 auto;
        }

    </style>

</head>
<body>
<div id="container">

</div>
<script type="text/javascript">
   var add = new Vue({
       el:"#container",
       data:{
           userNumber:0,
           personNumber:0
       },
       created:function(){
           this.dataUserNumber();
           this.dataPersonNumber();
       },
       methods:{
           dataUserNumber:function () {
               var  _this = this;
               $.ajax({
                   url:"/selectUserNumber",
                   async:false,
                   success:function (data) {
                       _this.userNumber =data.obj;

                   },
                   error:function (error) {
                       alert(data.responseJSON.message);
                   },

                });
           },
           dataPersonNumber:function () {
               var  _this = this;
               $.ajax({
                   url:"/selectPersonNumber",
                   async:false,
                   success:function (data) {
                       _this.personNumber =data.obj;

                   },
                   error:function (error) {
                       alert(data.responseJSON.message);
                   },

               });
           }
       }
   });

    $(document).ready(function() {
        var chart = {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        };
        var title = {
            text: '用户数量占有率'
        };
        var tooltip = {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        };

        var plotOptions = {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        };
        var series= [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['用户人数',add.userNumber],
                ['商家人数',add.personNumber]
            ]
        }];
        var json = {};
        json.chart = chart;
        json.title = title;
        json.tooltip = tooltip;
        json.plotOptions = plotOptions;
        json.series = series;
        $('#container').highcharts(json);
    });



</script>
</body>
</html>